import React, {Component} from "react";
import {Breadcrumb, DatePicker, Input, Select, Button, Table, Tabs} from 'antd';
import {withRouter} from 'react-router-dom';
import '../Jstj/Jstj.css'
import '../Tkgl/Tkgl.css'
import '../Tkgl/Tkgl.jsx'

const lphzdata = [
    {
        key: '1',
        buildingName: '蓝光COCO',
        goodsType: '团购优惠',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '2',
        buildingName: '蓝光COCO',
        goodsType: '房源认购',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '3',
        buildingName: '蓝光COCO',
        goodsType: '团购优惠',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '4',
        buildingName: '蓝光COCO',
        goodsType: '房源认购',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '5',
        buildingName: '蓝光COCO',
        goodsType: '房源认购',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '6',
        buildingName: '蓝光COCO',
        goodsType: '房源认购',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '7',
        buildingName: '蓝光COCO',
        goodsType: '房源认购',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '8',
        buildingName: '蓝光COCO',
        goodsType: '房源认购',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },


];
const sphzdata = [
    {
        key: '1',
        buildingName: '蓝光COCO',
        goodsType: '交5000抵20000',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '2',
        buildingName: '蓝光COCO',
        goodsType: '交5000抵20000',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '3',
        buildingName: '蓝光COCO',
        goodsType: '交5000抵20000',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '4',
        buildingName: '蓝光COCO',
        goodsType: '交5000抵20000',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '5',
        buildingName: '蓝光COCO',
        goodsType: '交5000抵20000',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
    {
        key: '6',
        buildingName: '蓝光COCO',
        goodsType: '交5000抵20000',
        startTime: '2015-03-11',
        endTime: '2015-04-11',
        orderTotal: '32345.00',
        returnTotal: '5000.00',
    },
];
const dingdata = [
    {
        key: '1',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1601室',
        user: 'user name',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '2',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1602室',
        user: '蔡徐坤（代）',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '3',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1603室',
        user: '鹿晗',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '4',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1604室',
        user: '范伟',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '5',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1605室',
        user: '范冰冰',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '6',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1606室',
        user: '王五',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '7',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1607室',
        user: '李四',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    },
    {
        key: '8',
        orderNum: '201503111420000',
        goods: '1期1栋2单元16楼1608室',
        user: '张三',
        billTotal: '5000.00',
        billTime: '2014-09-22 12:12:23',
        buyUser:'张三丰',
        sureState:'认购成功'
    }

];
const tuidata = [
    {
        key: '1',
        orderNum: '2015031114200001',
        backNum: '2015031114200001',
        goods: '1期1栋2单元16楼1601室',
        applyUser: 'user name',
        buyUser: '张三疯',
        backMoney:'5000.00',
        backTime:'2014-09-22 12:12:23'
    },
    {
        key: '2',
        orderNum: '2015031114200001',
        backNum: '2015031114200001',
        goods: '1期1栋2单元16楼1602室',
        applyUser: 'user name',
        buyUser: '张三疯',
        backMoney:'5000.00',
        backTime:'2014-09-22 12:12:23'
    },
    {
        key: '3',
        orderNum: '2015031114200001',
        backNum: '2015031114200001',
        goods: '1期1栋2单元16楼1603室',
        applyUser: 'user name',
        buyUser: '张三疯',
        backMoney:'5000.00',
        backTime:'2014-09-22 12:12:23'
    },
    {
        key: '4',
        orderNum: '2015031114200001',
        backNum: '2015031114200001',
        goods: '1期1栋2单元16楼1604室',
        applyUser: 'user name',
        buyUser: '张三疯',
        backMoney:'5000.00',
        backTime:'2014-09-22 12:12:23'
    },
    {
        key: '5',
        orderNum: '2015031114200001',
        backNum: '2015031114200001',
        goods: '1期1栋2单元16楼1605室',
        applyUser: 'user name',
        buyUser: '张三疯',
        backMoney:'5000.00',
        backTime:'2014-09-22 12:12:23'
    },
    {
        key: '6',
        orderNum: '2015031114200001',
        backNum: '2015031114200001',
        goods: '1期1栋2单元16楼1606室',
        applyUser: 'user name',
        buyUser: '张三疯',
        backMoney:'5000.00',
        backTime:'2014-09-22 12:12:23'
    }
];


const {Option} = Select;
const {TabPane} = Tabs;

function handleChange(value) {
    console.log(`selected ${value}`);
}

class Jstj extends Component {
    constructor(props) {
        super(props);
        this.zhangdanmingxi= React.createRef();
        this.zongzhangdan= React.createRef();
        this.state = {
            data: []
        };
        this.columns = [
            {
                title: '楼盘名称',
                align: 'center',
                dataIndex: 'buildingName',
                key: 'buildingName'
            },
            {
                title: '商品类型',
                align: 'center',
                dataIndex: 'goodsType',
                key: 'goodsType'
            },
            {
                title: '开始时间',
                align: 'center',
                dataIndex: 'startTime',
                key: 'startTime'
            },
            {
                title: '结束时间',
                align: 'center',
                dataIndex: 'endTime',
                key: 'endTime'
            },
            {
                title: '订单总额',
                align: 'center',
                dataIndex: 'orderTotal',
                key: 'orderTotal'
            },
            {
                title: '退单总额',
                align: 'center',
                dataIndex: 'returnTotal',
                key: 'returnTotal'
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: '',
                key: 'operation',
                render: () => (<div>
                    <Button onClick={()=>this.chaKan()}>查看</Button>
                </div>)
            }
        ];
        this.columns1 = [
            {
                title: '楼盘名称',
                align: 'center',
                dataIndex: 'buildingName',
                key: 'buildingName'
            },
            {
                title: '商品名称',
                align: 'center',
                dataIndex: 'goodsType',
                key: 'goodsType'
            },
            {
                title: '开始时间',
                align: 'center',
                dataIndex: 'startTime',
                key: 'startTime'
            },
            {
                title: '结束时间',
                align: 'center',
                dataIndex: 'endTime',
                key: 'endTime'
            },
            {
                title: '订单总额',
                align: 'center',
                dataIndex: 'orderTotal',
                key: 'orderTotal'
            },
            {
                title: '退单总额',
                align: 'center',
                dataIndex: 'returnTotal',
                key: 'returnTotal'
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: '',
                key: 'operation',
                render: () => (<div>
                    <Button onClick={()=>this.chaKan()}>查看</Button>
                </div>)
            }
        ];
        this.columns2=[
            {
                title: '订单号',
                align: 'center',
                dataIndex: 'orderNum',
                key: 'orderNum'
            },
            {
                title: '商品（房源）',
                align: 'center',
                dataIndex: 'goods',
                key: 'goods'
            },
            {
                title: '下单用户',
                align: 'center',
                dataIndex: 'user',
                key: 'user'
            },
            {
                title: '下单总额',
                align: 'center',
                dataIndex: 'billTotal',
                key: 'billTotal'
            },
            {
                title: '下单时间',
                align: 'center',
                dataIndex: 'billTime',
                key: 'billTime'
            },
            {
                title: '买家',
                align: 'center',
                dataIndex: 'buyUser',
                key: 'buyUser'
            },
            {
                title: '认购状态',
                align: 'center',
                dataIndex: 'sureState',
                key: 'sureState'
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: '',
                key: 'operation',
                render: () => (<div>
                    <Button>查看</Button>
                </div>)
            }
        ];
        this.columns3=[
            {
                title: '订单号',
                align: 'center',
                dataIndex: 'orderNum',
                key: 'orderNum'
            },
            {
                title: '退单号',
                align: 'center',
                dataIndex: 'backNum',
                key: 'backNum'
            },
            {
                title: '商品（房源）',
                align: 'center',
                dataIndex: 'goods',
                key: 'goods'
            },
            {
                title: '申请用户',
                align: 'center',
                dataIndex: 'applyUser',
                key: 'applyUser'
            },
            {
                title: '买家',
                align: 'center',
                dataIndex: 'buyUser',
                key: 'buyUser'
            },
            {
                title: '退款总额',
                align: 'center',
                dataIndex: 'backMoney',
                key: 'backMoney'
            },
            {
                title: '退款时间',
                align: 'center',
                dataIndex: 'backTime',
                key: 'backTime'
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: '',
                key: 'operation',
                render: () => (<div>
                    <Button>查看</Button>
                </div>)
            }
        ]
    }

    render() {
        return (
            <div>
                <Breadcrumb>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>交易</Breadcrumb.Item>
                    <Breadcrumb.Item>结算统计</Breadcrumb.Item>
                </Breadcrumb>
                <div className="line"/>
                <div ref={this.zongzhangdan} style={{display:'block'}}  className="zongzhangdan">
                    <div className="content">
                        <div className="leftF">
                            <div>统计周期：</div>
                            <div><DatePicker onChange={onChange}/></div>
                            <div>-</div>
                            <div><DatePicker onChange={onChange}/></div>
                        </div>
                        <div className="leftF1">
                            <div>所属楼盘：</div>
                            <div className="suoShu"><Input/></div>
                        </div>
                        <div className="leftF2">
                            <div>商品类型:</div>
                            <div>
                                <Select defaultValue="lucy" style={{width: 120}} onChange={handleChange}>
                                    <Option value="lucy">团购优惠</Option>
                                    <Option value="团购优惠">房源认购</Option>
                                </Select>
                            </div>
                            <div>
                                <Button>搜索</Button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <Tabs defaultActiveKey="1">
                            <TabPane tab="按楼盘汇总账单" key="1">
                                <Table dataSource={lphzdata} columns={this.columns} bordered={true} pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: 5
                                }}>
                                </Table>
                            </TabPane>
                            <TabPane tab="按商品汇总账单" key="2">
                                <Table dataSource={sphzdata} columns={this.columns1} bordered={true} pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: 5
                                }}>
                                </Table>
                            </TabPane>
                        </Tabs>
                    </div>
                </div>
                <div ref={this.zhangdanmingxi} style={{display:'none'}} className="zhangdanmingxi">
                    <div className="mingC">账单明细</div>
                    <div className="xiaoshouZ">
                        <div className="loulan">
                            <div>楼盘名称：蓝光COCO</div>
                            <div>商品名称：房源认购</div>
                        </div>
                        <div>统计周期：2015-03-11 至 2015-04-11</div>
                        <div>销售总额：<span className="zongMoney">53423.00</span>=58423.00（订单总额）-5000.00（退单总额）</div>
                    </div>
                    <div>
                        <Tabs defaultActiveKey="1">
                            <TabPane tab="订单明细" key="1">
                                <Table dataSource={dingdata} columns={this.columns2} bordered={true} pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: 5
                                }}>
                                </Table>
                            </TabPane>
                            <TabPane tab="退款明细" key="2">
                                <Table dataSource={tuidata} columns={this.columns3} bordered={true} pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: 5
                                }}>
                                </Table>
                            </TabPane>
                        </Tabs>
                    </div>
                    <div className="backPage"><Button onClick={()=>this.fanhui()}>返回</Button></div>
                </div>
            </div>
        )
    }
    chaKan=()=>{
        this.zhangdanmingxi.current.focus();
        this.zhangdanmingxi.current.style.display='block';
        this.zongzhangdan.current.focus();
        this.zongzhangdan.current.style.display='none';
    }
    fanhui=()=>{
        this.zhangdanmingxi.current.focus();
        this.zhangdanmingxi.current.style.display='none';
        this.zongzhangdan.current.focus();
        this.zongzhangdan.current.style.display='block';
    }
}

function onChange(date, dateString) {
    console.log(date, dateString);
}

export default Jstj;